<template>
	<view class="container-gray">
		<video id="myVideo" @play="playVideo" @pause="pauseVideo" v-if="showVideo" :src="videoUrl"
		 style="width:100%;height: 420upx;"></video>
		<image v-else :src="imgUrl" style="width:100%;height: 420upx;" mode="aspectFill" />
		<view>
			<view class="flex-box" style="background: #FFFFFF;">
				<view class="tab-bar-item" v-for="(item, index) in tabBars" @click="changeTabs(index)" :key="index">
					<view class="tab-bar-title" :class="tabIndex === index ? 'sub-cate-active' : ''">{{ item }}</view>
					<view class="underline" v-if="tabIndex === index"></view>
				</view>
			</view>
			<view>
				<swiper @change="currentChange" :current="tabIndex" style="min-height: 700upx;">
					<swiper-item>
						<view class="container-white">
							<view style="font-size:32upx;color: #333333;font-weight:bold;">{{ detail.title }}</view>
							<view style="margin-top: 10px;">
								<view style="font-size:28upx;color: #999999;">
									浏览人次
									<span style="color: #666666;margin-left: 20upx;">{{ detail.viewCount }}人次</span>
								</view>
								<view style="font-size:28upx;color: #999999;">
									发布时间
									<span style="color: #666666;margin-left: 20upx;">{{ detail.updateTime }}</span>
								</view>
							</view>
							<rich-text :class="isShow ? 'retractbrief' : 'openbrief'" :nodes="detail.brief"></rich-text>
							<rich-text id="textHeight" class="retractbrief hidetext" :nodes="detail.brief"></rich-text>
							<template v-if="height > 14">
								<view class="open" v-if="!isShow" @click="isHide">
									展开
									<image style="width: 20upx;height: 20upx;" src="../../static/img/xxjt.png" />
								</view>
								<view v-else class="retract" @click="isHide">
									收起
									<image style="width: 20upx;height: 20upx;" src="../../static/img/xsjt.png" />
								</view>
							</template>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="container-white">
							<view @click="hidden = true" style="font-size:24upx;color: #999999;display: flex;">
								<view style="width:30upx;height:30upx;border: 1px solid #999999;border-radius: 50%;text-align: center;margin-right: 12upx;font-weight: bold;">
									!
								</view>
								<view style="color: #666666;">完成规则</view>
							</view>

							<scroll-view scroll-y="true" class="container-white-scroll" show-scrollbar="false">
								<view>
									<view v-for="(item, index) in resourcesList" :key="index" style="display: flex;margin-top: 20upx;align-items: center;justify-content: space-between;">
										<view style="display: flex;justify-content:space-between;width: 100%;" @click="getCourse(item, index)">
											<view class="type-tips">
												{{
													item.type == 1
														? '图片'
														: item.type == 2
														? '视频'
														: item.type == 3
														? '文件'
														: item.type == 4
														? '作业'
														: item.type == 5
														? '考试'
														: '考试'
												}}
											</view>
											<view class="type-status">
												<view style="width: 400upx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;height: 40upx;">{{ item.name }}</view>
											</view>
											<template v-if="item.type == 5">
												<view class="type" v-if="item.status == 0">未参加</view>
												<view class="type" v-if="item.status == 1">未通过</view>
												<view class="type" v-if="item.status == 2">已通过</view>
												<view class="type" v-if="item.status == 3">未通过</view>
											</template>
											<template v-else>
												<view class="type" v-if="item.status == 0">未学习</view>
												<view class="type" v-if="item.status == 1">未完成</view>
												<view class="type" v-if="item.status == 2">已完成</view>
											</template>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view>
							<view class="heard">
								<view style="width: 94%; margin: 0 3%;display: flex;">
									<view class="text-input">
										<!-- <image class="search" src="../../static/img/ss.png"></image> -->
										<input class="input" type="text" v-model="realname" placeholder="请输入姓名或者关键字" />
									</view>
									<view class="searchbtn" @click="getallusercoursestatus(1)">
										<!-- 	<button @click="getallusercoursestatus">搜索</button> -->
										搜索
									</view>
								</view>
							</view>
							<view v-if="data.length > 0">
								<view class="dis">
									<view class="dis-box">序号</view>
									<view class="dis-tox">姓名</view>
									<view class="dis-kox">部门</view>
									<view class="dis-sox">完成情况</view>
								</view>
								<view class="hover" v-for="(x, index) in data" :key="index">
									<view class="dis-pox">{{ x.index }}</view>
									<view class="dis-hox">{{ x.realName }}</view>
									<view class="dis-dox">{{ x.deptName }}</view>
									<view class="dis-wox" v-if="x.status == 1">
										<image style="width: 80upx;height: 60upx;" src="../../static/img/wan.png" />
									</view>
									<view class="dis-wox" v-if="x.status == 0"><span>未完成</span></view>
									<view class="dis-wox" v-if="x.status == 2"><span>无权限</span></view>
								</view>
							</view>
							<view style="display: flex;margin: 8upx 20upx;">
								<view class="down">
									<!-- <span>共<span>{{this.totalCount}}</span>条记录</span>
									<span>共<span>{{this.totalPage}}</span>页</span> -->
									
									<span style="margin-right: 20upx;">第{{page}}页</span>
									<span  @click="up" style="margin-right: 10upx;">上一页</span>
									<span  @click="down">下一页</span>
									<!-- 					<view class="">
												<input type="text" value="" style="width: 40upx; height: 40upx; border: 1upx solid #007AFF;" />
												<span>GO</span>
											</view> -->
									<!-- 							<view style="display: flex; margin-left: 65%;">
												<view>上一页</view>
												<view>下一页</view>
												<view><input  type="text" style="width: 60upx; border: 1px solid #007AFF;text-align: left;" /></view>
												<span>Go</span>
												</view> -->

								</view>

							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 学习规则弹窗 -->
		<model v-if="hidden">
			<view completion-rule>
				<view style="text-align: center;border-bottom: 1px solid #ececec;font-size:32upx;padding-bottom: 20upx;">完成规则</view>

				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class="rule-title" v-if="videoList.length > 0">视频</view>
					<view v-for="item in videoList" :key="item.id">
						<view class="rule-item">
							<!-- <span>{{ item.name }}学习时长达到{{ parseInt((item.courseTime * finishRate) / 100) || 1 }}秒,为完成.</span> -->
								<span>{{ item.name }}学习时长达到{{item.courseTime}}秒,为完成.</span>
						</view>
					</view>
					<view class="rule-title" v-if="examList.length > 0">考试</view>
					<view v-for="item in examList" :key="item.id">
						<view class="rule-item">
							<span>{{ item.name }}达到{{ item.score }}分,为完成。</span>
						</view>
					</view>
					<view class="rule-title" v-if="fileList.length > 0">课件</view>
					<view v-for="item in fileList" :key="item.id">
						<span class="rule-item">{{ item.name }}学习时长为{{ parseInt((item.courseTime * finishRate) / 100) || 1 }}秒,为完成。</span>
					</view>
				</scroll-view>
			</view>
			<view><button type="primary" class="primary" @click="hidden = false" style="margin-top: 20upx;font-size: 32upx;">确认</button></view>
		</model>

		<!-- 图文弹窗 -->
		<view v-if="showImg" @click="saveResourceStatus('img')" style="background: rgba(0,0,0);position: fixed; z-index: 10001;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
			<image :src="resourceUrl" style="width: 90%;" mode="aspectFill" @click.stop.prevent="moveHandle" @load="imageLoad" />
		</view>
	</view>
</template>

<script>
	import {
		post_md5,
		request_integral
	} from '../../common/request';
	import {
		richText
	} from '../../common/common';
	import {
		formatSeconds
	} from '../../common/common';
	export default {
		data() {
			return {
				isShow: false,
				show: false,
				tabBars: ['课程简介', '章节目录', '完成情况'],
				tabIndex: 0,
				scrollTop: 0,
				cateId: '',
				detail: {},
				page: 1,
				videoList: [],
				examList: [],
				fileList: [],
				videoUrl: null,
				imgUrl: null,
				hidden: false,
				showImg: false,
				showVideo: false,
				loadingType: true,
				filePath: null,
				resourceUrl: null,
				course: null,
				courseId: '',
				type: '',
				videoAllUrl: '',
				startTime: '',
				courseTime: '',
				finishRate: '',
				resourceId: null,
				resourcetype: null,
				data: [],
				realName: '',
				deptName: '',
				realname: '',
				timestop: '',
				fullWidth: '',
				idInfo: '',
				height: '',
				courseType: '',
				statTime: '',
				totalPage: 1,
				resourcesList: [],
				totalCount: 1,
				pauser: 1,
				videoStop: null,
				timer: null
			};
		},
		onLoad(options) {
			this.courseId = options.id;
			this.videoContext = uni.createVideoContext('myVideo');
		},
		async onShow() {
			await this.getDetail();

			const query = uni.createSelectorQuery().in(this);
			query
				.select('#textHeight')
				.boundingClientRect(data => {
					this.height = data.height;
				})
				.exec();
			if (uni.getSystemInfoSync().platform == 'android') {
				if (this.resourcetype != 4 && this.resourcetype != 5 && this.resourceId != null) this.saveResourceStatus('file');
			}
		},
		beforeDestroy() {
			if (this.timer !== null) {
				clearInterval(this.timer)
				this.timer = null
				console.log('destory')
			}
		},
		methods: {
			isHide() {
				this.isShow = !this.isShow;
			},
			saveResourceStatus(val) {
				if (val == 'img') this.showImg = false;
				if (this.resourceStatus == 2) return false;
				if (val != 'file' && val != 'img' && val != 'video') return falseval;
				var timestamp = new Date().getTime() / 1000;
				var ad_str = timestamp.toString();
				var timestamp = parseInt(ad_str);
				var kkk = timestamp - this.startTime;
				var smalltime = (this.finishRate / 100) * this.courseTime;
				const params = {
					learnTime: 0,
					resourceId: this.resourceId,
					status: kkk < smalltime ? 1 : 2,
					type: this.type,
					courseId: this.courseId,
					userId: uni.getStorageSync('userId'),
					idInfo: this.idInfo
				};
				if (params.status == 2 && val == 'img') request_integral('image', params.idInfo);
				if (params.status == 2 && val == 'video') request_integral('video', params.idInfo);
				if (params.status == 2 && val == 'file') request_integral('file', params.idInfo);
				// if (params.status == 2 && val == 'exam') request_integral('exam', params.idInfo)
				post_md5('/train-app/courseapp/saveresourcehistory', params).then(res => {
					if (res.data !== null) {
						var index = this.resourcesList.findIndex(x => x.resourceId === res.data.resourceId)
						var resource = this.resourcesList[index]
						resource.status = res.data.status
						resource.type = res.data.resourceType
						this.$set(this.resourcesList, index, resource)
					}
				});
			},
			playVideo(e) {
				let status = this.resourceStatus
				
				if (this.timer != null) {
					clearInterval(this.timer)
					this.timer = null
				}

				this.timer = setInterval(() => {
					this.countdown();
				}, 1000)

				setTimeout(() => {
					if (status !== 2) {
						this.getsaveresourcehistory(1)
					}
				}, 1000)
				// if (e.type == 'play') this.startTime = new Date().getTime() / 1000;
			},
			async getsaveresourcehistory(status) {
				const params = {
					status: status,
					courseId: this.courseId,
					userId: uni.getStorageSync('userId'),
					idInfo: this.idInfo,
					resourceId: this.resourceId,
					type: this.type,
				}
				let res = await post_md5('/train-app/courseapp/saveresourcehistory', params)

				if (res.data !== null) {
					this.resourcesList.forEach(x => {
						if (x.resourceId === res.data.resourceId) {
							x.status = res.data.status;
							x.type = res.data.resourceType;
							this.resourceStatus = res.data.status;
						}
					});
				}
			},
			countdown() {				
				if (this.courseTime > 0) {
					this.courseTime--
					// this.remainingTime = formatSeconds(second);
				} else {
					clearInterval(this.timer);
					this.timer = null;
					this.getsaveresourcehistory(2)
				}
			},
			pauseVideo(e) {
				console.log(e)
				this.pauser = 2
				clearInterval(this.timer)
			},
			up() {
				if (this.page === 1){
					uni.showToast({
						title: '暂无上一页',
						icon: 'none'
					});
					return false
				}
				else{
					this.page = this.page - 1
					this.getallusercoursestatus()
				}
			},
			down() {
				this.page = this.page + 1
				if (this.totalPage >= this.page) {
					this.getallusercoursestatus()
				} else {
					uni.showToast({
						title: '暂无下一页',
						icon: 'none'
					});
					this.page = this.page - 1
				}

			},
			getallusercoursestatus(page) {
				this.totalCount = ''
				if (page) this.page = page
				const params = {
					courseId: this.courseId,
					userId: uni.getStorageSync('userId'),
					// page: parseInt(status) === 1 ? this.page -- : parseInt(status) === 2 ? this.page ++ : this.page,
					// page: status == 1? this.page -- : suatus == 2 ? this.page ++ : this.page,
					page: this.page,
					realname: this.realname
				};
				post_md5('/train-app/courseapp/allusercoursestatus', params).then(res => {
					if (res.data.list.length != 0) {
						this.data = res.data.list;
						this.totalCount = res.data.totalCount
						this.totalPage = res.data.totalPage
					} else {
						this.data = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
				});
			},
			async getDetail() {
				const params = {
					courseId: this.courseId,
					userId: uni.getStorageSync('userId')
				};
				let res = await post_md5('/train-app/courseapp/getcourseinfo', params);
				console.log(res)

				this.imgUrl = res.data.imgUrl;
				this.detail = res.data;
				this.videoList = res.data.resourse.filter(x => x.type == 2);
				this.examList = res.data.resourse.filter(x => x.type == 5);
				this.fileList = res.data.resourse.filter(x => x.type == 1 || x.type == 3);
				this.detail.brief = richText(res.data.brief);
				this.finishRate = res.data.finishRate;
				this.resourcesList = res.data.resourse.map(x => ({
					idInfo: x.idInfo,
					resourceId: x.id,
					resourceUrl: x.resourceUrl,
					name: x.name,
					status: x.status,
					type: x.type,
					courseTime: x.courseTime,
				}));
				this.courseTimes = res.data.resourse.map(x => x.courseTime);
			},
			examjump(item) {
				uni.navigateTo({
					url: `examresult?resourceId=` + item.idInfo + '&tag=true'
				});
			},
			// tab切换
			changeTabs(index) {
				this.tabIndex = index;
			},

			currentChange(e) {
				this.tabIndex = e.detail.current;
				if (this.tabIndex == 2) {
					// const params = {
					// 	courseId: this.courseId,
					// 	userId: uni.getStorageSync('userId')
					// }
					// post_md5('/train-app/courseapp/updateusercoursestatus', params).then(
					// 	res => {
					// 		if (res.code == 200)
					this.getallusercoursestatus(1);
					// 	})
				}
			},
			isShowVideo() {
				this.showVideo = false;
				uni.hideLoading();
			},
			imageLoad() {
				uni.hideLoading();
			},
			openFile(filePath) {
				let that = this;
				uni.showLoading({
					title: '文件打开中'
				});
				// 支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
				uni.openDocument({
					filePath: escape(filePath),
					success() {
						if (uni.getSystemInfoSync().platform != 'android') {
							that.saveResourceStatus('file');
						} else {
							that.startTime = new Date().getTime() / 1000;
						}
					},
					fail: function(err) {
						uni.showToast({
							title: '打开文档失败',
							icon: 'none'
						});
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			getCourse(item, index) {
				this.videoContext.stop();
				// val.type != "pause"
				this.courseTime = this.courseTimes[index];
				this.resourceId = item.resourceId;
				this.idInfo = item.idInfo;
				this.resourcetype = item.type;
				this.resourceStatus = item.status;
				this.type = item.type;
				switch (parseInt(item.type)) {
					case 1:
						var timestamp = new Date().getTime() / 1000;
						var ad_str = timestamp.toString();
						this.startTime = parseInt(ad_str.substring(0, ad_str.indexOf('.')));
						uni.showLoading({
							title: '图片加载中'
						});
						this.showVideo = false;
						this.showImg = true;
						this.resourceUrl = item.resourceUrl;
						if (item.status == 2) request_integral('image', item.idInfo);
						break;
					case 2:
						this.showVideo = true;
						const params = {
							publicUrl: item.resourceUrl
						};
						post_md5('/sys/oss/privatevideodownloadurl', params).then(res => {
							this.videoUrl = res.data;
						});
						if (item.status == 2) request_integral('video', item.idInfo);
						break;
					case 3:
						// #ifdef APP-PLUS
						let that = this;
						let resourceUrl = JSON.parse(uni.getStorageSync('resourceUrl') || '{}');
						// todo 打开pdf重复错误
						if (resourceUrl && Object.keys(resourceUrl).length > 0 && Object.keys(resourceUrl).filter(x => parseInt(x) ===
								parseInt(item.resourceId)).length) {
							for (let key in resourceUrl) {
								if (parseInt(key) === parseInt(item.resourceId)) {
									this.openFile(resourceUrl[key]);
								}
							}
						} else {
							uni.showLoading({
								title: '文件加载中'
							});
							uni.downloadFile({
								url: item.resourceUrl,
								success: function(res) {
									uni.saveFile({
										tempFilePath: res.tempFilePath,
										success: function(res) {
											resourceUrl[item.resourceId] = res.savedFilePath;
											uni.setStorageSync('resourceUrl', JSON.stringify(resourceUrl));
											uni.hideLoading();
											that.openFile(res.savedFilePath);
										},
										fail(err) {}
									});
								},
								fail(err) {}
							});
						}
						// #endif
						if (item.status == 2) request_integral('file', item.idInfo);
						break;
					case 4:
						break;
					case 5:
						if (item.status == 2) {
							this.examjump(item);
							request_integral('exam', item.idInfo);
							return false;
						}
						if (item.status == 3) {
							this.examjump(item);
							uni.showToast({
								title: '考试次数已达上线',
								icon: 'ne'
							});
							return false;
						} else {
							uni.navigateTo({
								url: `exam?id=${item.idInfo}&type=${item.type}&name=${item.name}&courseId=${this.courseId}`
							});
						}
						if (item.status == 2) request_integral('exam', item.idInfo);
						break;
					case 6:
						break;
					default:
						break;
				}
			},

			stopEvent() {
				//@click.stop防止事件冒泡
			},
			moveHandle() {
				//不让页面滚动
			}
		}
	};
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #ffffff;
	}

	.down {
		/* display: flex; */
		margin-top: 5upx;
		flex: 1;
		font-size: 26upx;
		/* justify-content: space-around; */
		text-align: right;
	}

	.open {
		width: 94%;
		margin: 20upx 3%;
		height: 60upx;
		border: 1px solid #999999;
		border-radius: 100upx;
		text-align: center;
		line-height: 60upx;
		color: #999999;
	}

	.type {
		width: 110upx;
		height: 24upx;
		margin-right: 30upx;
		font-size: 18upx;
		margin-top: 10upx;
	}

	.retract {
		width: 94%;
		/* margin: 10upx 40upx 10upx 40upx; */
		margin: 20upx 3%;
		height: 60upx;
		border: 1px solid #999999;
		border-radius: 100upx;
		text-align: center;
		line-height: 60upx;
		color: #999999;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.openbrief {
		line-height: 14px;
		height: 14px;
		font-size: 26upx;
		color: #999999;
		overflow: hidden;
	}

	.retractbrief {
		font-size: 26upx;
		line-height: 14px;
		color: #999999;
		overflow: hidden;
		opacity: 1;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.back {
		width: 50upx;
		height: 50upx;
		background: rgba(0, 0, 0, 5);
		position: fixed;
		top: 68upx;
		left: 30upx;
		z-index: 99;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab-bar-item {
		flex: 1;
	}

	.underline {
		width: 90upx;
		height: 4upx;
	}

	.container-white {
		border-radius: 10upx;
		padding: 20upx 20upx 0 20upx;
		margin: 15upx;
		width: 690upx;
	}

	.scroll-Y {
		height: 300upx;
	}

	.container-white-scroll {
		height: 600upx;
	}

	.type-tips {
		border: 1px solid #ededed;
		white-space: nowrap;
		padding: 6upx 20upx;
		border-radius: 5px;
		font-size: 24upx;
		margin-right: 10upx;
		color: #666666;
	}

	.type-status {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.type-status-iamge {
		width: 20upx;
		height: 20upx;
	}

	.model-footer-btn {
		margin-top: 20px;
	}

	.rule-title {
		font-size: 28upx;
		color: #666666;
		margin-top: 40upx;
	}

	.rule-item {
		font-size: 24upx;
		color: #666666;
		line-height: 40upx;
		margin-top: 10upx;
	}

	.dis {
		display: flex;
		margin: 0 3%;
		height: 60upx;
		margin-top: 15upx;
		background: #f5f5f5;
	}

	.heard {
		background: #ededed;
		width: 100%;
		height: 100upx;
		font-size: 20px;
		display: flex;
	}

	.text-input {
		width: 80%;
		height: 60upx;
		background: #ffffff;
		margin-top: 20upx;
		border-radius: 10upx;
		padding-left: 50upx;
		display: flex;
	}

	.input {
		padding-top: 12upx;
		line-height: 60upx;
		font-size: 28upx;
	}

	.searchbtn {
		width: 120upx;
		height: 60upx;
		margin-top: 20upx;
		line-height: 60upx;
		font-size: 26upx;
		background: #02a8f4;
		text-align: center;
		color: #ffffff;
	}

	.dis-box {
		/* flex: 1; */
		width: 80upx;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}

	.dis-pox {
		/* flex: 1; */
		width: 80upx;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-left: 1upx solid rgba(204, 204, 204, 1);
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}
	.dis-tox {
		/* flex: 1; */
		width: 120upx;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-top: 1upx solid rgba(204, 204, 204, 1);
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}
	.dis-kox {
		flex: 1;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-top: 1upx solid rgba(204, 204, 204, 1);
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}
	.dis-sox {
		/* flex: 1; */
		width: 120upx;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-top: 1upx solid rgba(204, 204, 204, 1);
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}
.dis-hox{
	/* flex: 1; */
	width: 120upx;
	text-align: center;
	/* border: 1upx solid #DDDDDD;
	 */
	border-right: 1upx solid rgba(204, 204, 204, 1);
	border-bottom: 1upx solid rgba(204, 204, 204, 1);
	height: 60upx;
	line-height: 60upx;
	font-size: 24upx;
}
	.dis-wox {
		/* flex: 1; */
		width: 120upx;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}
	.dis-dox {
		flex: 1;
		text-align: center;
		/* border: 1upx solid #DDDDDD;
		 */
		border-right: 1upx solid rgba(204, 204, 204, 1);
		border-bottom: 1upx solid rgba(204, 204, 204, 1);
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
	}

	.search {
		width: 40upx;
		height: 40upx;
		margin-top: 14upx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin: 20upx 20upx 0 20upx;
		border: 1px solid #000000;
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin: 20upx 20upx 0 20upx;
		border: 1px solid #000000;
	}

	.hover {
		text-align: center;
		display: flex;
		margin: 0 3%;
		text-align: center;
		background: #ffffff;
		/* background-color: #3399FF; */
	}

	.container-gray {
		display: flex;
		flex: 1;
		flex-direction: column;
		background: #ffffff;
		width: 100%;
		height: 100%;
	}
	
	.container-gray uni-page-wrapper {
		height: 100% !important;
	}

	.hidetext {
		position: absolute;
		top: 0;
		z-index: -100;
		left: 0;
		opacity: 0;
	}
</style>
